
(function (eObj){
    window.bi={


        new:function (id){

            return eObj.init(document.getElementById(id));
        },
        demoDataMap: {
            "provinceData": [
                {
                    "province_id": 11,
                    "province_name": "吉林省"
                },
                {
                    "province_id": 12,
                    "province_name": "黑龙江省"
                },
                {
                    "province_id": 13,
                    "province_name": "辽宁省"
                }
            ],
            "cityData": {
                "11": [
                    {"city_id": "1101", "city_name": "长春市"},
                    {"city_id": "1102", "city_name": "吉林市"}
                ],
                "-1": []

            },
            "areaData": {
                "1101": [
                    {"area_id": "11011", "area_name": "南关区"},
                    {"area_id": "11022", "area_name": "净月区"}
                ],
                "-1": []

            },
            "simpleBar": {
                legend: {
                    data: ['直接访问']
                },
                xAxis: [
                    {
                        data: [
                            "旅游行业",
                            "教育培训",
                            "游戏行业",
                            "医疗行业",
                            "电商行业",
                            "社交行业",
                            "金融行业"
                        ],
                    }
                ],
                series: [
                    {
                        name: "直接访问",
                        data: [200, 300, 300, 900, 1500, 1200, 600],
                    }
                ]
            },
            "simpleLine": {
                legend: {
                    data: ['直接访问']
                },
                xAxis: [
                    {
                        data: [
                            "旅游行业",
                            "教育培训",
                            "游戏行业",
                            "医疗行业",
                            "电商行业",
                            "社交行业",
                            "金融行业"
                        ],
                    }
                ],
                series: [
                    {
                        name: "直接访问",
                        data: [200, 300, 300, 900, 1500, 1200, 600],
                    }
                ]
            },
            "simplePie": {
                legend: {
                    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                },
                series: [
                    {
                        name: "访问来源",
                        data: [
                            {value: 335, name: '直接访问'},
                            {value: 310, name: '邮件营销'},
                            {value: 234, name: '联盟广告'},
                            {value: 135, name: '视频广告'},
                            {value: 1548, name: '搜索引擎'}
                        ]
                    }
                ]

            },
            "simpleRadar": {
                "legend": {
                    "data": ["A", "B"]
                },
                "radar": {
                    "indicator": [
                        {"name": "AA", "max": 6500},
                        {"name": "BB", "max": 16000},
                        {"name": "CC", "max": 30000},
                        {"name": "DD", "max": 38000},
                        {"name": "EE", "max": 52000},
                        {"name": "FF", "max": 25000}
                    ]

                },
                "series": [
                    {
                        "data": [
                            {
                                "value": [4200, 3000, 20000, 35000, 50000, 18000],
                                "name": "A"
                            },
                            {
                                "value": [5000, 14000, 28000, 26000, 42000, 21000],
                                "name": "B"
                            }
                        ]
                    }
                ]
            },
            "simpleMap": {
                legend: {
                    data: ["全国数据"]
                },
                series: [
                    {
                        name: "全国数据",
                        data: [
                            {name: "南海诸岛", value: 1111,},
                            {name: "辽宁", value: 2222},
                            {name: "黑龙江", value: 33333},
                            {name: "吉林", value: 444},
                        ]
                    }
                ]
            },
            "simpleBar2": {
                "unit":"%",
                data: [
                    {
                        "name": "HTML5",
                        "value": 99,
                        "weight": 11,
                    },
                    {
                        "name": "GO",
                        "value": 36,
                        "weight": 22,

                    },
                    {
                        "name": "C#",
                        "value": 74,
                        "weight": 33,

                    },
                    {
                        "name": "C",
                        "value": 65,
                        "weight": 44,

                    },
                    {
                        "name": "C++",
                        "value": 96,
                        "weight": 55,

                    },
                    {
                        "name": "C++",
                        "value": 35,
                        "weight": 11,

                    },

                ]


            }
        },
            colorArr: ["#1089E7","#8B78F6","#F57474", "#56D0E3", "#F8B448","#ea7ccc", "#9a60b4", "#065aab", "#066eab", "#0682ab", "#0696ab", "#06a0ab", "#91cc75", "#fac858", "#ee6666", "#73c0de", "#3ba272", "#fc8452"],
            getDemoData: function (key) {
                let json = JSON.stringify(this.demoDataMap[key]);//将对象转换为json字符串形式
                return JSON.parse(json);//将转换而来的字符串转换为原生js对象
            },
            //基础条形图
            simpleBar: function (chart, data) {

            let self=this;
                if (!data) {
                    data = {
                        xAxis: [],
                        series: [],
                    }
                }
                if (!data.xAxis) {
                    data.xAxis = [];
                }
                if (!data.series) {
                    data.series = [];
                }

                let option = {
                    color: [],
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            // 坐标轴指示器，坐标轴触发有效
                            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    xAxis: [],
                    // 修改图表的大小
                    grid: {
                        left: "0%",
                        top: "10px",
                        right: "0%",
                        bottom: "4%",
                        containLabel: true
                    },
                    yAxis: [{
                        type: "value",
                        // 修改刻度标签 相关样式
                        axisLabel: {
                            color: "rgba(255,255,255,.6) ",
                            fontSize: 12,


                        },
                        // y轴的线条改为了 2像素
                        axisLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.1)",
                                width: 2
                            }
                        },
                        // y轴分割线的颜色
                        splitLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.1)"
                            }
                        }
                    }],
                    series: []
                };

                //图例
                if (data.legend) {
                    option.legend = data.legend;
                    option.legend.textStyle = {color: "#ccc", fontSize: "10"};
                }

                data.xAxis.forEach(function (ele,i) {
                    ele.type = "category"
                    ele.axisTick = {alignWithLabel: true}
                    ele.axisLabel = {
                        color: "rgba(255,255,255,.6) ",
                        fontSize: "12",
                        interval: 0,
                        rotate: 40,
                        formatter: function (value, index) {

                            if (value.length > 10) {
                                return value.substr(0, 5) + '...'
                            } else {
                                return value
                            }
                        },
                    }
                    ele.axisLine = {
                        show: false
                    }
                    option.xAxis.push(ele)
                })

                data.series.forEach(function (ele,i) {
                    option.color.push(self.colorArr[i])
                    ele.type = "bar"
                    ele.barWidth = "15%"
                    ele.itemStyle = {
                        // 修改柱子圆角
                        barBorderRadius: 5
                    }
                    option.series.push(ele)
                })


                console.log(JSON.stringify(option));
                // 3. 把配置项给实例对象
                chart.setOption(option);
                // 4. 让图表跟随屏幕自动的去适应
                window.addEventListener("resize", function () {
                    chart.resize();
                });

            },
            simpleLine: function (chart, data) {

                let self=this;
                if (!data) {
                    data = {
                        xAxis: [],
                        series: [],
                    }
                }
                if (!data.xAxis || !data.series) {
                    return
                }

                let option = {
                    color: [],
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            // 坐标轴指示器，坐标轴触发有效
                            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    xAxis: [],
                    // 修改图表的大小
                    grid: {
                        left: "0%",
                        top: "10px",
                        right: "0%",
                        bottom: "4%",
                        containLabel: true
                    },
                    yAxis: [{
                        type: "value",
                        // 修改刻度标签 相关样式
                        axisLabel: {
                            color: "rgba(255,255,255,.6) ",
                            fontSize: 12,
                        },
                        // y轴的线条改为了 2像素
                        axisLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.1)",
                                width: 2
                            }
                        },
                        // y轴分割线的颜色
                        splitLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.1)"
                            }
                        }
                    }],
                    series: []
                };

                //图例
                if (data.legend) {
                    option.legend = data.legend;
                    option.legend.textStyle = {color: "#ccc", fontSize: "10"};
                }

                data.xAxis.forEach(function (ele) {

                    ele.type = "category"
                    ele.axisTick = {alignWithLabel: true}
                    ele.axisLabel = {
                        color: "rgba(255,255,255,.6) ",
                        fontSize: "12",
                        interval: 0,
                        rotate: 40,
                        formatter: function (value, index) {

                            if (value.length > 10) {
                                return value.substring(0, 5) + '...'
                            } else {
                                return value
                            }
                        },
                    }
                    ele.axisLine = {
                        show: false
                    }
                    option.xAxis.push(ele)
                })

                data.series.forEach(function (ele,i) {
                    option.color.push(self.colorArr[i])
                    ele.type = "line"
                    ele.barWidth = "15%"
                    ele.itemStyle = {
                        // 修改柱子圆角
                        barBorderRadius: 5
                    }
                    option.series.push(ele)
                })


                // 3. 把配置项给实例对象
                chart.setOption(option);
                // 4. 让图表跟随屏幕自动的去适应
                window.addEventListener("resize", function () {
                    chart.resize();
                });

            },
            simpleMap: function (chart, data) {

                if (!data) {
                    data = {
                        legend: {data: []},
                        series: [],
                    }
                }
                if (!data.legend) {
                    return
                }

                if (!data.series) {
                    return
                }


                let option = {
                    tooltip: {
                        trigger: "item",
                    },
                    legend: {
                        orient: "horizontal", //图例的排列方向
                        textStyle: {color: "#ccc", fontSize: "10"},
                        x: "right", //图例的位置
                        y: "0",
                        data: data.data,
                    },

                    // visualMap: {
                    //     //颜色的设置  dataRange
                    //     textStyle: { color: "#ccc", },
                    //     x: "left",
                    //     y: "bottom",
                    //     splitList: [
                    //         { start: 300, end: 300 },
                    //     ],
                    //     min:10,
                    //     max:100,
                    //     text:["高","低"],
                    //     show: true,
                    //     color: ["rgb(50,88,124)"],
                    // },
                    roamController: {
                        //控制地图的上下左右放大缩小
                        show: false,
                        x: "right",
                        mapTypeControl: {
                            china: true,
                        },
                    },

                    series: [],
                };
                // normal: {
                //     areaColor: 'rgba(24, 109, 212,0.7)',
                //         borderColor: 'rgba(255, 255, 253)'
                // },
                // emphasis: {
                //     areaColor: 'rgba(43, 145, 183)'
                // }
                data.series.forEach(function (ele) {

                    ele.itemStyle = {
                        normal: {
                            areaColor: 'rgba(24, 109, 212,0.7)',
                            borderColor: 'rgba(255, 255, 253)',
                        },
                        emphasis: {
                            areaColor: 'rgba(43, 145, 183)'
                        },
                    };
                    ele.label = {
                        normal: {
                            show: false  //省份名称
                        },
                        emphasis: {
                            show: true
                        }
                    }

                    ele.type = "map";
                    ele.top ="20%";
                    ele.mapType = "china";
                    ele.zoom = 1.1;
                    ele.roam = true;
                    option.series.push(ele);

                });
                chart.setOption(option);
                window.addEventListener("resize", function () {
                    chart.resize();
                });
            },
            simplePie: function (chart, data) {
                if (!data) {
                    data = {
                        legend: {data: []},
                        series: [],
                    }
                }
                if (!data.legend) {
                    data.legend = {data: []};
                }
                if (!data.series) {
                    data.series = [];
                }

                let option = {
                    color: [],
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        //   backgroundColor:'#333',
                        itemWidth: 10,
                        itemHeight: 10,
                        bottom: "0%",
                        data: data.legend.data,
                        textStyle: {
                            color: "rgba(255,255,255,.5)",
                            fontSize: "12"
                        }

                    },
                    series: []
                };


                for (let i = 0; i < data.legend.data.length; i++) {
                    option.color.push(this.colorArr[i]);
                }

                //格式化数据体
                data.series.forEach(function (s) {

                    s.type = 'pie'
                    s.center = ["50%", "50%"]
                    s.radius = ["40%", "60%"]
                    s.avoidLabelOverlap = false
                    s.label = {
                        show: false,
                        position: 'center'
                    }
                    s.emphasis = {
                        label: {
                            show: true,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                    s.labelLine = {
                        show: false
                    }

                    option.series.push(s)
                })

                chart.setOption(option);
                window.addEventListener("resize", function () {
                    chart.resize();
                });


            },
            resize: function (charts) {
                window.addEventListener("resize", function () {
                    charts.forEach(function (chart) {
                        chart.resize();
                    })
                });
            },
            simpleRadar: function (chart, data) {

                if (!data) {
                    data = {
                        legend: {data: []},
                        series: [],
                    }
                }
                if (!data.legend) {
                    data.legend = {data: []};
                }
                if (!data.series) {
                    data.series = [];
                }

                let option = {
                    series: [],
                    title: data.title,
                    legend: data.legend,
                    radar: data.radar,
                    color: [],

                }


                option.tooltip = {
                    trigger: 'item',
                    confine: true,
                    formatter: function (params) {
                        let relVal = params.name;
                        let typeList = option.radar.indicator;

                        for (let i = 0; i < params.data.value.length; i++) {
                            relVal += '<br/>' + typeList[i].name + ' : '
                                + params.data.value[i];
                        }
                        return relVal;
                    }

                }
                option.legend.textStyle = {
                    color: "rgba(255,255,255,.5)",
                    fontSize: "12"
                }

                //垂直显示图例
                option.legend.orient = 'vertical';
                option.legend.right = 0;
                option.radar["radius"] = 80


                for (let i = 0; i < data.legend.data.length; i++) {
                    option.color.push(this.colorArr[i])
                }


                data.series.forEach(function (ele) {
                    ele.type = 'radar'
                    option.series.push(ele);
                })


                chart.setOption(option);
                // 4. 让图表跟随屏幕自动的去适应
                window.addEventListener("resize", function () {
                    chart.resize();
                });

            },
            simpleBar2: function (chart, data) {


            if(!data.unit){
                data.unit=""
            }
            let self=this;
                let option = {
                    grid: {
                        top: "10%",
                        left: "5%",
                        bottom: "10%",
                        containLabel: true
                    },
                    // 不显示x轴的相关信息
                    xAxis: {
                        show: false
                    },
                    yAxis: [],
                    series: [,

                    ]
                };
                let yAxisName = {
                    type: "category",
                    inverse: true,
                    data: [],
                    // 不显示y轴的线
                    axisLine: {show: false},
                    // 不显示刻度
                    axisTick: {show: false},
                    // 把刻度标签里面的文字颜色设置为白色
                    axisLabel: {color: "#fff"}
                }, yAxisValue = {
                    data: [],
                    inverse: true,
                    // 不显示y轴的线
                    axisLine: {
                        show: false
                    },
                    // 不显示刻度
                    axisTick: {
                        show: false
                    },
                    // 把刻度标签里面的文字颜色设置为白色
                    axisLabel: {
                        color: "#fff"
                    }
                }, seriesWeight = {
                    name: "条",
                    type: "bar",
                    data: [],
                    yAxisIndex: 0,
                    // 修改第一组柱子的圆角
                    itemStyle: {
                        barBorderRadius: 20,
                        // 此时的color 可以修改柱子的颜色
                        color: function (params) {
                            return self.colorArr[params.dataIndex];
                        }
                    },
                    // 柱子之间的距离
                    barCategoryGap:50,
                    //柱子的宽度
                    barWidth: 10,
                    // 显示柱子内的文字
                    label: {
                        show: true,
                        position: "inside",
                        // {c} 会自动的解析为 数据  data里面的数据
                        formatter: "{c}"+data.unit
                    }
                }, seriesMax = {
                    name: "框",
                    type: "bar",
                    barCategoryGap: 50,
                    barWidth: 15,
                    yAxisIndex: 1,
                    data: [],
                    itemStyle: {
                        color: "none",
                        borderColor: "#00c1de",
                        borderWidth: 3,
                        barBorderRadius: 15
                    }
                }

                data.data.forEach(function (ele) {
                    yAxisName.data.push(ele.name);
                    yAxisValue.data.push(ele.value);
                    seriesWeight.data.push(ele.weight);
                    seriesMax.data.push(100);
                });

                option.yAxis.push(yAxisName, yAxisValue);
                option.series.push(seriesWeight, seriesMax);


                // 3. 把配置给实例对象
                chart.setOption(option);
                // 4. 让图表跟随屏幕自动的去适应
                window.addEventListener("resize", function () {
                    chart.resize();
                });

            }
        }


})(echarts)



